<template>
    <el-dialog
      :visible.sync="isShow"
      class="dialog-detail"
      @close="handleClose"
      center
      top="14vh"
      width="756px"
      :fullscreen="fullscreen"
    >
      <div id="echartDeep2" class="flex-f flex-c" style="flex:1 1 0%"></div>
    </el-dialog>
  </template>
  <script>
  import * as echarts from "echarts";
  export default {
    name: "deepEchartBar",
    // components:{EnjoySelectUser,EnjoySelectDeptTree,FileUploadInput},
    props: {
      params:[Object],
      visible: {
        type: Boolean,
        default: false,
      },
      //   data:Object,
      //   type:[String,Number] //1:新增  2：编辑 3：查看
    },
    mounted() {
      // this.renderEchart();
      console.log(this);
    },
    watch: {
      visible(val) {
        if (val) {
          // this.renderEchart()
          // this.$nextTick(() => {
          //     let echartColumnDom = document.getElementById('deepData')
          // console.log(echartColumnDom)
          // this.myChart = echarts.init(echartColumnDom);
          //     this.myChart.setOption(this.option);
          // })
          //   this.getList();
        }
      },
    },
    computed: {
      isShow: {
        get() {
          return this.visible;
        },
        set() {},
      },
      headerTitle() {
        return "签名";
      },
    },
    data() {
      return {
        myChart: null,
        option: {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "Direct",
              type: "bar",
              barWidth: "60%",
              data: [10, 52, 200, 334, 390, 330, 220],
            },
          ],
        },
        isCrop: false,
        lineWidth: 6,
        passModel: [],
        lineColor: "black",
        bgColor: "rgba(230,230,230,0.5000)",
        loading: false,
        fullscreen: false,
        deviceOptions: undefined,
        factoryOptions: undefined,
        dialogForm: {},
        queryParams: {
          dateType: "1",
          factoryCode: [],
          startTime: "2023-05-01",
          endTime: "2023-06-30",
        },
        // 表单校验
        rules: {
          // aaa: [
          //   { required: true, message: "厂区类型不能为空", trigger: "blur" }
          // ],
        },
      };
    },
    methods: {
      renderEchart() {
        this.$nextTick(() => {
          let echartColumnDom = document.getElementById("deepData");
          console.log(echartColumnDom);
          let myChart = echarts.init(echartColumnDom);
          myChart.setOption(this.option);
        });
      },
      handleClose(done) {
        this.$emit("update:visible", false);
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .dialog-detail {
    /*斑马纹*/
    ::v-deep .el-table--enable-row-hover {
      tr:hover td.el-table__cell {
        background-color: transparent !important;
      }
    }
    ::v-deep .el-table--striped .el-table__body {
      .el-table__cell {
        border: none;
      }
  
      tr.el-table__row--striped {
        td.el-table__cell {
          background-color: rgba(255, 255, 255, 0.1) !important;
          border: none;
        }
      }
    }
    ::v-deep .el-dialog {
      overflow: visible;
    }
    ::v-deep .el-table__empty-text {
      color: white;
    }
    ::v-deep .el-table {
      border: none;
      // background-color: rgba(255, 255, 255, 0.1);
      &:before {
        height: 0;
      }
      tr {
        background-color: transparent;
        .cell {
          color: white;
        }
      }
      th {
        background-color: transparent !important;
        border: none;
      }
    }
    .dialog-close {
      position: absolute;
      top: -32px;
      right: -2px;
      opacity: 0.95;
      &:hover {
        cursor: pointer;
      }
    }
  
    ::v-deep .el-dialog__header {
      // display: none;
      background: rgb(5,62,72);
      border:none;
    }
    ::v-deep .el-dialog__body {
      display: flex;
      flex: 1 1 0%;
      height: 400px;
      padding: 0 8px;
      background: rgb(5,62,72);
      // box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.5);
      // border-radius: 4px;
    }
  }
  </style>
  